<template>
  <div class="home">
    <el-container>
      <el-header>
        <div class="left">
          <i class="el-icon-s-home"></i>
          <span>课程管理系统</span>
        </div>
        <div class="avatar">
          <i class="el-icon-s-home"></i>
          <div class="demo-basic--circle">
            <div class="block"><el-avatar :size="35" src=""></el-avatar></div>
          </div>
          <el-dropdown trigger="click" @command="handleCommand">
            <span class="el-dropdown-link">
              管理系统<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="exit">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">

          <el-menu :default-active="$route.path" class="el-menu-vertical-demo" background-color="#324157"
            text-color="#fff" active-text-color="#269BEA" router>
            <el-menu-item index="/index">
              <i class="el-icon-s-data"></i>
              <span slot="title">首页</span>
            </el-menu-item>
            <el-menu-item v-for="item in $store.state.user.roles" :key="item.children[0].path"
              :index="item.children[0].path">
              <i class="el-icon-s-home"></i>
              <span slot="title">{{ item.children[0].meta.title }}</span>
            </el-menu-item>

          </el-menu>

        </el-aside>
        <el-container>
          <el-main>
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { logout } from '@/api/admin/user'
import { studentInfo } from '@/api/student/course';
export default {
  name: 'HomeView',
  components: {

  },
  methods: {
    handleCommand(command) {
      if (command == 'exit') {
        logout().then(res => {
          // console.log(res);
          if (res.code == 0) {
            this.$message({
              type: 'success',
              message: res.data
            })
            this.$store.commit("user/updateLoggedIn", false)
            this.$store.commit("user/updateUserType", 0)
            this.$store.commit("user/updateRoles", [])
            this.$store.commit("user/updatePermisson", 0)
            this.$router.push("/login")
          }
        })
      }
    }
  }
}
</script>


<style lang="scss" scoped>
.home {
  height: 100%;
  background-color: #F0F0F0;
}

.el-container {
  height: 100%;

  .el-menu {
    border: none;
  }

  .el-header {
    background-color: #242F42;
    text-align: center;
    font-size: 20px;
    color: #fff;
    display: flex;
    justify-content: space-between;

    .left {
      width: 160px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .avatar {
      display: flex;
      align-items: center;
      width: 200px;
      justify-content: space-around;

      .el-dropdown-link {
        cursor: pointer;
        color: #fff;
      }

      .el-icon-arrow-down {
        font-size: 12px;
      }
    }
  }

  .el-aside {
    background-color: #324157;

  }

  .el-main {
    padding: 8px;
    height: 100%;
  }

}
</style>